{% extends "base.html" %}

{% block title %}审核申请 - {{ application.student.real_name }} - 乒乓球培训管理系统{% endblock %}

{% block extra_css %}
<style>
    .approve-header {
        background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
        color: white;
        border-radius: 8px;
        padding: 30px;
        margin-bottom: 30px;
    }

    .student-summary {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 30px;
    }

    .student-avatar-lg {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
        border: 4px solid rgba(255,255,255,0.3);
        box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    }

    .student-info h4 {
        color: #333;
        margin-bottom: 10px;
    }

    .student-meta {
        color: #666;
        font-size: 1rem;
        margin-bottom: 15px;
    }

    .info-item {
        margin-bottom: 15px;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    .info-item:last-child {
        border-bottom: none;
    }

    .info-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 5px;
    }

    .info-value {
        color: #666;
    }

    .application-details {
        background: white;
        border-radius: 8px;
        padding: 25px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        margin-bottom: 30px;
    }

    .section-title {
        color: #333;
        font-size: 1.2rem;
        font-weight: 600;
        margin-bottom: 20px;
        padding-bottom: 10px;
        border-bottom: 2px solid #e5e5e5;
        display: flex;
        align-items: center;
    }

    .section-title i {
        margin-right: 10px;
        color: #007bff;
    }

    .application-note {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        border-left: 4px solid #007bff;
        font-size: 1rem;
        line-height: 1.6;
    }

    .application-timeline {
        background: #f8f9fa;
        border-radius: 8px;
        padding: 20px;
        margin-top: 20px;
    }

    .timeline-item {
        display: flex;
        align-items: center;
        margin-bottom: 15px;
    }

    .timeline-item:last-child {
        margin-bottom: 0;
    }

    .timeline-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 15px;
        font-size: 1.2rem;
    }

    .timeline-pending {
        background: #fff3cd;
        color: #856404;
    }

    .timeline-content {
        flex: 1;
    }

    .timeline-title {
        font-weight: 600;
        margin-bottom: 3px;
    }

    .timeline-time {
        color: #666;
        font-size: 0.9rem;
    }

    .approve-form {
        background: white;
        border-radius: 8px;
        padding: 30px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    }

    .form-section {
        margin-bottom: 30px;
        padding-bottom: 25px;
        border-bottom: 1px solid #eee;
    }

    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
    }

    .form-label {
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }

    .form-control {
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 12px 15px;
    }

    .form-control:focus {
        border-color: #007bff;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
    }

    .action-buttons {
        display: flex;
        gap: 15px;
        justify-content: center;
        padding-top: 20px;
    }

    .btn-approve {
        background: linear-gradient(45deg, #28a745, #20c997);
        border: none;
        border-radius: 25px;
        padding: 15px 40px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .btn-approve:hover {
        background: linear-gradient(45deg, #218838, #1ea085);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(40, 167, 69, 0.3);
    }

    .btn-reject {
        background: linear-gradient(45deg, #dc3545, #c82333);
        border: none;
        border-radius: 25px;
        padding: 15px 40px;
        color: white;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .btn-reject:hover {
        background: linear-gradient(45deg, #c82333, #a71e2a);
        color: white;
        transform: translateY(-2px);
        box-shadow: 0 4px 15px rgba(220, 53, 69, 0.3);
    }

    .btn-cancel {
        background: #6c757d;
        border: none;
        border-radius: 25px;
        padding: 15px 30px;
        color: white;
        font-size: 1.1rem;
    }

    .btn-cancel:hover {
        background: #545b62;
        color: white;
    }

    .decision-tips {
        background: #e7f3ff;
        border: 1px solid #b3d7ff;
        border-radius: 8px;
        padding: 15px;
        margin-bottom: 20px;
    }

    .decision-tips h6 {
        color: #0066cc;
        margin-bottom: 10px;
    }

    .decision-tips ul {
        margin-bottom: 0;
        padding-left: 20px;
    }

    .decision-tips li {
        color: #333;
        margin-bottom: 5px;
    }

    .char-counter {
        font-size: 0.85rem;
        color: #666;
        text-align: right;
        margin-top: 5px;
    }

    .back-link {
        color: white;
        text-decoration: none;
        opacity: 0.9;
    }

    .back-link:hover {
        color: white;
        opacity: 1;
        text-decoration: none;
    }
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 审核页面头部 -->
    <div class="row">
        <div class="col-12">
            <div class="approve-header">
                <div class="d-flex justify-content-between align-items-center">
                    <div>
                        <h2 class="mb-2">审核学员申请</h2>
                        <p class="mb-0 fs-5">审核来自 {{ application.student.real_name }} 的选择申请</p>
                    </div>
                    <div>
                        <a href="{{ url_for('coach_student.applications') }}" class="back-link">
                            <i class="bi bi-arrow-left me-2"></i>返回申请列表
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <!-- 左侧 - 学员信息 -->
        <div class="col-md-4">
            <div class="student-summary">
                <div class="text-center mb-4">
                    <img src="{{ application.student.photo_url or url_for('static', filename='images/default-avatar.svg') }}"
                         alt="{{ application.student.real_name }}" class="student-avatar-lg">
                </div>

                <div class="student-info text-center mb-4">
                    <h4>{{ application.student.real_name }}</h4>
                    <div class="student-meta">
                        {{ '男' if application.student.gender == 'male' else '女' }}
                        {% if application.student.age %}・{{ application.student.age }}岁{% endif %}
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-telephone me-2"></i>联系电话
                    </div>
                    <div class="info-value">
                        {{ application.student.phone or '未填写' }}
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-envelope me-2"></i>邮箱地址
                    </div>
                    <div class="info-value">
                        {{ application.student.email or '未填写' }}
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-building me-2"></i>所属校区
                    </div>
                    <div class="info-value">
                        {{ application.student.campus.name if application.student.campus else '未分配' }}
                    </div>
                </div>

                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-calendar me-2"></i>注册时间
                    </div>
                    <div class="info-value">
                        {{ application.student.created_at.strftime('%Y年%m月%d日') if application.student.created_at }}
                    </div>
                </div>

                {% if application.student.bio %}
                <div class="info-item">
                    <div class="info-label">
                        <i class="bi bi-chat-quote me-2"></i>个人简介
                    </div>
                    <div class="info-value">
                        {{ application.student.bio }}
                    </div>
                </div>
                {% endif %}
            </div>
        </div>

        <!-- 右侧 - 申请详情和审核 -->
        <div class="col-md-8">
            <!-- 申请详情 -->
            <div class="application-details">
                <div class="section-title">
                    <i class="bi bi-file-text"></i>申请详情
                </div>

                {% if application.apply_note %}
                <div class="application-note">
                    <h6 class="mb-3">申请说明：</h6>
                    <p class="mb-0">{{ application.apply_note }}</p>
                </div>
                {% endif %}

                <div class="application-timeline">
                    <h6 class="mb-3">申请时间线</h6>
                    <div class="timeline-item">
                        <div class="timeline-icon timeline-pending">
                            <i class="bi bi-send"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">提交申请</div>
                            <div class="timeline-time">
                                {{ application.applied_at.strftime('%Y年%m月%d日 %H:%M') if application.applied_at }}
                            </div>
                        </div>
                    </div>
                    <div class="timeline-item">
                        <div class="timeline-icon timeline-pending">
                            <i class="bi bi-hourglass-split"></i>
                        </div>
                        <div class="timeline-content">
                            <div class="timeline-title">等待审核</div>
                            <div class="timeline-time">当前状态</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 审核表单 -->
            <div class="approve-form">
                <div class="section-title">
                    <i class="bi bi-check-square"></i>审核决定
                </div>

                <div class="decision-tips">
                    <h6><i class="bi bi-lightbulb me-2"></i>审核建议</h6>
                    <ul>
                        <li>仔细阅读学员的申请说明，了解其学习目标和基础</li>
                        <li>考虑当前学员数量和教学时间安排</li>
                        <li>通过申请后，学员将成为您的正式学员</li>
                        <li>拒绝申请时，请给出礼貌和建设性的回复</li>
                        <li>无论通过或拒绝，都可以在回复中给出建议</li>
                    </ul>
                </div>

                <form method="POST" id="approveForm">
                    <div class="form-section">
                        <div class="mb-3">
                            <label for="response_note" class="form-label">回复说明</label>
                            <textarea class="form-control" id="response_note" name="response_note" rows="6"
                                    placeholder="请给学员一个回复，说明您的决定原因或给出建议...&#10;&#10;通过示例：&#10;欢迎成为我的学员！从您的申请中可以看出您很有学习热情。我们先从基础动作开始，循序渐进地提高您的技术水平。期待与您一起训练！&#10;&#10;拒绝示例：&#10;很感谢您的申请。目前我的学员数量已满，暂时无法接收新学员。建议您联系其他优秀的教练，或者等待我的时间安排调整后再次申请。"
                                    maxlength="300"></textarea>
                            <div class="char-counter">
                                <span id="charCount">0</span>/300字
                            </div>
                        </div>
                    </div>

                    <div class="action-buttons">
                        <button type="submit" class="btn btn-approve" name="action" value="approve" id="approveBtn">
                            <i class="bi bi-check-circle me-2"></i>通过申请
                        </button>
                        <button type="submit" class="btn btn-reject" name="action" value="reject" id="rejectBtn">
                            <i class="bi bi-x-circle me-2"></i>拒绝申请
                        </button>
                        <a href="{{ url_for('coach_student.applications') }}" class="btn btn-cancel">
                            <i class="bi bi-arrow-left me-2"></i>稍后决定
                        </a>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
$(document).ready(function() {
    // 字符计数器
    const $textarea = $('#response_note');
    const $charCount = $('#charCount');
    const maxLength = 300;

    $textarea.on('input', function() {
        const currentLength = $(this).val().length;
        $charCount.text(currentLength);

        if (currentLength > maxLength * 0.9) {
            $charCount.addClass('text-warning');
        } else {
            $charCount.removeClass('text-warning');
        }

        if (currentLength >= maxLength) {
            $charCount.addClass('text-danger').removeClass('text-warning');
        } else {
            $charCount.removeClass('text-danger');
        }
    });

    // 表单提交确认
    $('#approveForm').on('submit', function(e) {
        // 修复submitter兼容性问题
        let action = null;

        // 首先检查是否有隐藏的action input（通过JavaScript添加的）
        const hiddenAction = $('#approveForm input[name="action"][type="hidden"]');
        if (hiddenAction.length > 0) {
            action = hiddenAction.val();
        }
        // 其次尝试使用submitter属性（现代浏览器）
        else if (e.originalEvent && e.originalEvent.submitter) {
            action = e.originalEvent.submitter.value;
        }
        // 最后尝试查找当前激活的按钮（兼容旧浏览器）
        else {
            const activeElement = document.activeElement;
            if (activeElement && activeElement.name === 'action') {
                action = activeElement.value;
            }
        }

        // 如果仍然无法确定操作类型，阻止提交
        if (!action) {
            e.preventDefault();
            alert('无效的操作类型，请重新点击按钮');
            return false;
        }

        const responseNote = $textarea.val().trim();

        const actionText = action === 'approve' ? '通过' : '拒绝';
        const studentName = '{{ application.student.real_name }}';

        const confirmMessage = `确认要${actionText} ${studentName} 的申请吗？${responseNote ? '\n\n回复内容：' + responseNote.substring(0, 50) + (responseNote.length > 50 ? '...' : '') : ''}`;

        if (!confirm(confirmMessage)) {
            e.preventDefault();
            // 清理可能添加的隐藏input
            $('#approveForm input[name="action"][type="hidden"]').remove();
            return false;
        }

        // 提交时禁用按钮防止重复提交
        $('#approveBtn, #rejectBtn').prop('disabled', true);

        if (action === 'approve') {
            $('#approveBtn').html('<i class="bi bi-hourglass-split me-2"></i>处理中...');
        } else {
            $('#rejectBtn').html('<i class="bi bi-hourglass-split me-2"></i>处理中...');
        }
    });

    // 默认回复模板 - 优化按钮点击处理
    $('#approveBtn').click(function(e) {
        const currentNote = $textarea.val().trim();
        if (!currentNote) {
            e.preventDefault();
            $textarea.val('欢迎成为我的学员！我很期待与您一起训练，帮助您提高乒乓球技术水平。');
            $textarea.trigger('input');

            if (confirm('已为您填入默认通过回复，是否继续提交？')) {
                // 设置一个隐藏的action值，确保表单提交时能正确识别
                $('<input>').attr({
                    type: 'hidden',
                    name: 'action',
                    value: 'approve'
                }).appendTo('#approveForm');
                $('#approveForm').submit();
            }
        }
    });

    $('#rejectBtn').click(function(e) {
        const currentNote = $textarea.val().trim();
        if (!currentNote) {
            e.preventDefault();
            $textarea.val('很感谢您的申请。由于当前时间安排等原因，暂时无法接收新学员。建议您联系其他优秀的教练。');
            $textarea.trigger('input');

            if (confirm('已为您填入默认拒绝回复，是否继续提交？')) {
                // 设置一个隐藏的action值，确保表单提交时能正确识别
                $('<input>').attr({
                    type: 'hidden',
                    name: 'action',
                    value: 'reject'
                }).appendTo('#approveForm');
                $('#approveForm').submit();
            }
        }
    });

    // 初始化字符计数
    $textarea.trigger('input');
});
</script>
{% endblock %}